//获取下拉框中option
$("document").ready(function(){
	//获取下拉列表里面的数值
	$.ajax({
		"url":"/zhgl-jzstyxx-manage/index/getPeriod",
		"type":"POST",
		"dataType":"json",
		"success":function(obj){
			if(obj!=null){
				for(var i=0;i<obj.length;i++){
					$("#sel").append("<option id="+obj[i].dictCode+" value="+obj[i].dictName+">"+obj[i].dictName+"</option>");
				}
			}
		}
	});	
});

//“单击查询按钮”根据下拉框的查询值，重新查询数据
$("#searchTable").click(function(){
	var val=($("#sel").val());
	var id=$("#sel>option:selected").attr("id");
	//根据下拉框中option标签的id来查询本日，近7日，近30日的消息流量数据
	if(id==2101){
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMessageByOptionByTime?id="+id,"type":"POST","dataType":"json",
			"success":function(obj){giveNumsByToday(nums,hours); }
		});
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMessageByOptionByTopic?id="+id,"type":"POST","dataType":"json",
			"success":function(obj){giveNumsByTopicByToday(topicLi,messageLi);}
		});
	}//if id=53结束
	if(id==2102){
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMessageByOptionByTimeId54?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var ts=obj[0];//topic
				var cs=obj[1];//nums
				giveSevenDaysNumsByTime(ts,cs);
			}
		})
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMessageByOptionByTopicId54?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var topic=obj[0];//topic
				var counts=obj[1];//nums
				giveSevenDaysNumsByTopic(topic,counts);
			}
		});
	}//if id=54结束
	if(id==2103){
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMessageByOptionByTimeId55?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var mts=obj[0];//topic
				var mcs=obj[1];//nums
				giveMonthNumsByTime(mts,mcs);
			}
		})
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMessageByOptionByTopicId55?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var mtopic=obj[0];//topic
				var mcounts=obj[1];//nums
				giveMonthNumsByTopic(mtopic,mcounts);
			}
		})
	}//if id=55结束
});//单击事件结束
/*****本日消息流量图表---x轴为按照时间--*****/
function giveNumsByToday(nums,hours){
	var myChartm3 = echarts.init(document.getElementById('chart-f'));
	var optionm3 = {
		backgroundColor:'#67479A',
		title : {text : time+'各时间段消息流量',textStyle:{fontSize:14,color:'#fff',},x:55,y:10,},
		tooltip : {trigger : 'axis',
			formatter:function(a){
	    		return a[0].name+"<br/>"
	    		+a[0].seriesName+":"+a[0].value+"条<br/>"
	    	}
		},
		toolbox:{
			show:true,
			color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
			backgroundColor:'rgba(255,255,255,0.8)',
			feature:{
				mark:{show:true},//辅助线开关
				dataView:{show:true,readOnly:false},//数据视图
				magicType:{//图表间切换
					show:true,
					type:['line','bar'],
				},
				restore:{show:true,title:'还原',color:'black'},//还原
				saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			boundaryGap : false,
			axisLabel:{show:true,textStyle:{color:'#fff',},interval:0,rotate:30},
			offset:-2,
			axisLine:{lineStyle:{color:'#fff',},},
			axisTink:{show:false,},
			splitLine:{show:false,},
			data : hours
		} ],
		yAxis : [ {
			type : 'value',
			axisLabel:{formatter:'{value}',textStyle:{color:'#fff',},},
			axisLine:{lineStyle:{color:'#fff',},},
			axisTink:{show:false,},
			splitLine:{show:false,},
		} ],
		series : [ {
			name : '消息流量',
			type : 'line',
			smooth : true,//曲线连接
			lineStyle:{normal:{color:"#67479A",width:2,},},
            //图表区域样式
            areaStyle: {normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  offset: 0,color: '#A998C5'}, { offset: 1, color: 'rgba(0,0,0,0)' }]), }},
			data : nums
		} ]
	};
	myChartm3.setOption(optionm3);
}//方法结束

/*****本日消息流量图表---x轴为按照主题队列--*****/
function giveNumsByTopicByToday(topicLi,messageLi){
	var myChartm4 = echarts.init(document.getElementById('chart-s'));
	var optionm4 ={
			//表格背景颜色
			backgroundColor:'#5A7BEF',
			//表格标题
			title : {
				text : time+'各主题队列消息流量',
				/* subtext : time, */
				textStyle:{
					fontSize:14,
					color:'#fff',
				},
				x:55,
				y:10,
			},
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			//提示框，鼠标悬浮交互时的信息提示
			tooltip : {
				trigger : 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"条<br/>"
		    	}
			},
			//是否启用拖拽重计算特性
			calculable : true,
			//X轴设计
			xAxis : [ {
				type : 'category',
				name:'主题队列名',
				boundaryGap:true, 
				axisLabel:{
					show:true,
					textStyle:{
						color:'#fff',
					},
					interval:0,
					rotate:30
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
				data : topicLi
			} ],
			//Y轴设计
			yAxis : [ {
				type : 'value',
				name:'单位: 条',
				axisLabel:{
					formatter:'{value}',
					textStyle:{
						color:'#fff',
					},
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
			} ],
			series : [ {
				name : '消息流量',
				type : 'bar',
				smooth : true,//曲线连接
				lineStyle:{
					normal:{
						color:"#A0C5EA",
						width:2,
					},
				},
	            //图表区域样式
	            areaStyle: {normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                        offset: 0,
	                        color: '#A998C5'
	                    }, {
	                        offset: 1,
	                        color: 'rgba(0,0,0,0)'
	                    }]),
	            }},
				data : messageLi
			} ]
		};
	myChartm4.setOption(optionm4);
	}//方法结束
/*****七日消息流量图表---x轴为按照时间--*****/
function giveSevenDaysNumsByTime(ts,cs){
	var myChartm5 = echarts.init(document.getElementById('chart-f'));
	var optionm5 = {
		backgroundColor:'#67479A',
		title : {text : '近七日各时间段消息流量',textStyle:{fontSize:14,color:'#fff',},x:55,y:10,},
		tooltip : {trigger : 'axis',
			formatter:function(a){
	    		return a[0].name+"<br/>"
	    		+a[0].seriesName+":"+a[0].value+"条<br/>"
	    	}
		},
		toolbox:{
			show:true,
			color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
			backgroundColor:'rgba(255,255,255,0.8)',
			feature:{
				mark:{show:true},//辅助线开关
				dataView:{show:true,readOnly:false},//数据视图
				magicType:{//图表间切换
					show:true,
					type:['line','bar'],
				},
				restore:{show:true,title:'还原',color:'black'},//还原
				saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			boundaryGap : false,
			axisLabel:{show:true,textStyle:{color:'#fff',},interval:0,rotate:30},
			offset:-2,
			axisLine:{lineStyle:{color:'#fff',},},
			axisTink:{show:false,},
			splitLine:{show:false,},
			data:ts
		} ],
		yAxis : [ {
			type : 'value',
			axisLabel:{formatter:'{value}',textStyle:{color:'#fff',},},
			axisLine:{lineStyle:{color:'#fff',},},
			axisTink:{show:false,},
			splitLine:{show:false,},
		} ],
		series : [ {
			name : '消息流量',
			type : 'line',
			smooth : true,//曲线连接
			lineStyle:{normal:{color:"#67479A",width:2,},},
            //图表区域样式
            areaStyle: {normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  offset: 0,color: '#A998C5'}, { offset: 1, color: 'rgba(0,0,0,0)' }]), }},
			data:cs,
		} ]
	};
	myChartm5.setOption(optionm5);
}
/*****七日消息流量图表---x轴为按照主题队列--*****/
function giveSevenDaysNumsByTopic(topic,counts){
	var myChartm6 = echarts.init(document.getElementById('chart-s'));
	var optionm6 = {
			backgroundColor:'#5A7BEF',
			title : {text : '近七日各主题消息流量',textStyle:{fontSize:14,color:'#fff',},x:55,y:10,},
			tooltip : {trigger : 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"条<br/>"
		    	}
			},
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				boundaryGap : true,
				axisLabel:{show:true,textStyle:{color:'#fff',},interval:0,rotate:30},
				axisLine:{lineStyle:{color:'#fff',},},
				axisTink:{show:false,},
				splitLine:{show:false,},
				data : topic//此处修改
			} ],
			yAxis : [ {type : 'value',
				axisLabel:{formatter:'{value}',textStyle:{color:'#fff',},},
				axisLine:{lineStyle:{color:'#fff',},},
				axisTink:{show:false,},
				splitLine:{show:false,},
			} ],
			series : [ {name : '消息流量',
				type : 'bar',
				smooth : true,//曲线连接
				lineStyle:{normal:{color:"#A0C5EA",width:2,},},
				areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#A998C5'}, {offset: 1,color: 'rgba(0,0,0,0)'}]),}},
				data : counts
			} ]
		};
	myChartm6.setOption(optionm6);
}
/*****30日消息流量图表---x轴为按照时间--*****/
function giveMonthNumsByTime(mts,mcs){
	var myChartm7 = echarts.init(document.getElementById('chart-f'));
	var optionm7 = {
		backgroundColor:'#67479A',
		title : {text : '近30日各时间段消息流量',textStyle:{fontSize:14,color:'#fff',},x:55,y:10,},
		tooltip : {trigger : 'axis',
			formatter:function(a){
	    		return a[0].name+"<br/>"
	    		+a[0].seriesName+":"+a[0].value+"条<br/>"
	    	}
		},
		toolbox:{
			show:true,
			color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
			backgroundColor:'rgba(255,255,255,0.8)',
			feature:{
				mark:{show:true},//辅助线开关
				dataView:{show:true,readOnly:false},//数据视图
				magicType:{//图表间切换
					show:true,
					type:['line','bar'],
				},
				restore:{show:true,title:'还原',color:'black'},//还原
				saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			boundaryGap : false,
			axisLabel:{show:true,textStyle:{color:'#fff',},interval:0,rotate:30},
			offset:-2,
			axisLine:{lineStyle:{color:'#fff',},},
			axisTink:{show:false,},
			splitLine:{show:false,},
			data:mts
		} ],
		yAxis : [ {
			type : 'value',
			axisLabel:{formatter:'{value}',textStyle:{color:'#fff',},},
			axisLine:{lineStyle:{color:'#fff',},},
			axisTink:{show:false,},
			splitLine:{show:false,},
		} ],
		series : [ {
			name : '消息流量',
			type : 'line',
			smooth : true,//曲线连接
			lineStyle:{normal:{color:"#67479A",width:2,},},
            //图表区域样式
            areaStyle: {normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  offset: 0,color: '#A998C5'}, { offset: 1, color: 'rgba(0,0,0,0)' }]), }},
			data:mcs,
		} ]
	};
	myChartm7.setOption(optionm7);
}
/*****30日消息流量图表---x轴为按照主题队列--*****/
function giveMonthNumsByTopic(mtopic,mcounts){
	var myChartm8 = echarts.init(document.getElementById('chart-s'));
	var optionm8 = {
			backgroundColor:'#5A7BEF',
			title : {text : '近30日各主题消息流量',textStyle:{fontSize:14,color:'#fff',},x:55,y:10,},
			tooltip : {trigger : 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"条<br/>"
		    	}
			},
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				boundaryGap : true,
				axisLabel:{show:true,textStyle:{color:'#fff',},interval:0,rotate:30},
				axisLine:{lineStyle:{color:'#fff',},},
				axisTink:{show:false,},
				splitLine:{show:false,},
				data : mtopic//此处修改
			} ],
			yAxis : [ {type : 'value',
				axisLabel:{formatter:'{value}',textStyle:{color:'#fff',},},
				axisLine:{lineStyle:{color:'#fff',},},
				axisTink:{show:false,},
				splitLine:{show:false,},
			} ],
			series : [ {name : '消息流量',
				type : 'bar',
				smooth : true,//曲线连接
				lineStyle:{normal:{color:"#A0C5EA",width:2,},},
				areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#A998C5'}, {offset: 1,color: 'rgba(0,0,0,0)'}]),}},
				data : mcounts
			} ]
		};
	myChartm8.setOption(optionm8);
}